//点击隐藏显示侧边导航栏
document.getElementById("toggle-btn").addEventListener("click", function () {
    let sidebar = document.getElementById("sidebar");
    sidebar.classList.toggle("active");
});

document.addEventListener('DOMContentLoaded', (event) => {
    // 链接点击事件监听器  
    document.querySelectorAll('.nav-links li a').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault(); // 阻止默认的链接跳转行为  
            let targetId = this.getAttribute('data-target'); //获取要滚动到的目标ID
            let targetElement = document.getElementById(targetId); //获取目标元素
            if (targetElement) {
                // 使用平滑滚动效果  
                targetElement.scrollIntoView({ behavior: 'smooth' });

                // 更新导航链接的样式  
                let navLinks = document.querySelectorAll('.nav-link');
                navLinks.forEach(function (navLink) {
                    navLink.classList.remove('active');
                });
                this.classList.add('active');
            }
        });
    });

    // 滚动事件监听器  
    window.addEventListener('scroll', function () {
        let sections = document.querySelectorAll('.section');
        let navLinks = document.querySelectorAll('.nav-link');

        sections.forEach(function (section, index) {
            if (isScrolledIntoView(section)) {
                // 清除所有链接的active类  
                navLinks.forEach(function (link) {
                    link.classList.remove('active');
                });

                // 为当前滚动到的部分对应的链接添加active类  
                if (navLinks[index]) {
                    navLinks[index].classList.add('active');
                }
            }
        });
    });

    // 辅助函数：检查元素是否滚动到视口中  
    function isScrolledIntoView(elem) {
        let docViewTop = window.scrollY || document.documentElement.scrollTop;
        let docViewBottom = docViewTop + window.innerHeight;

        let elemTop = elem.getBoundingClientRect().top + docViewTop;
        let elemBottom = elemTop + elem.clientHeight;

        return elemBottom >= docViewTop && elemTop <= docViewBottom;
    }
});

const carouselWrapper = document.getElementById('carouselWrapper');
const slides = document.querySelectorAll('.carousel-slide');
const dots = document.querySelectorAll('.dot');
const slideWidth = slides[0].offsetWidth; // 获取单张图片的宽度  
let currentSlide = 0;
let autoPlayInterval; // 用于存储定时器ID  

// 初始化时设置容器宽度以包含所有图片  
carouselWrapper.style.width = `${slideWidth * slides.length}px`;

// 更新小圆点的状态  
function updateDots() {
    dots.forEach((dot, index) => {
        dot.classList.remove('active');
        if (index === currentSlide) {
            dot.classList.add('active');
        }
    });
}

// 切换到下一张图片  
function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    updateSlidePosition();
    updateDots();
}

// 更新图片的显示位置  
function updateSlidePosition() {
    carouselWrapper.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
}

// 初始化自动播放  
function startAutoPlay() {
    autoPlayInterval = setInterval(nextSlide, 3000); // 每3秒切换一次  
}

// 添加小圆点的点击事件监听器  
dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
        // 清除自动播放的定时器  
        clearInterval(autoPlayInterval);

        // 更新当前图片  
        currentSlide = index;
        updateSlidePosition();
        updateDots();

        // 重新启动自动播放  
        startAutoPlay();
    });
});

// 初始化时启动自动播放  
startAutoPlay();

document.getElementById('modalTrigger').addEventListener('click', function () {
    // 获取模态框  
    let modal = document.getElementById('myModal');
    // 获取body元素  
    let body = document.body;

    // 显示模态框  
    modal.style.display = "block";
    // 添加一个类到body，用于在模态框打开时变暗背景或禁用滚动  
    body.classList.add('modal-open');

    // 获取关闭按钮  
    let span = document.getElementsByClassName("close")[0];

    // 为关闭按钮添加点击事件  
    span.onclick = function () {
        modal.style.display = "none";
        body.classList.remove('modal-open');
    }

    // 当用户点击模态框以外的区域时，关闭模态框  
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
            body.classList.remove('modal-open');
        }
    }
});